<template>
  <div class="p-x-8">
    <router-link
      v-for="issue in issues"
      :key="issue.id"
      :to="`/spaces/${issue.product_id}/issues/${issue.id}`"
      class="block easy-container-mini p-x-8 border-bottom">
      <div class="title line2">{{ issue.title }}</div>
      <div class="flex f-mini info-deep">
        <span title="点赞数">
          <svg-icon icon-name="like-fill" />
          <span>{{ issue.votes.like_size }}</span>
        </span>
        <span title="评论数" class="m-l-10">
          <svg-icon icon-name="gitlab_comments" />
          <span>{{ issue.comment_count }}</span>
        </span>
        <timeago2 :date-time="issue.created_at" pre-text="创建于" class="m-l-auto" />
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'active-issues', // 最新问题
  data() {
    return {
      issues: [],
      loading: false,
    };
  },
  created() { this.loadIssues(); },
  methods: {
    loadIssues() {
      this.loading = true;
      this.$api.homepage.issues()
        .then((res) => { this.issues = res.data; })
        .catch(() => {})
        .then(() => { this.loading = false; });
    },
  },
};
</script>

<style lang="scss">
a.easy-container-mini:first-of-type { padding-top: 0; }
</style>
